<template>
  <a-spin tip="加载中..." :spinning="spinning">
    <div class="comment-item">
      <div class="comment-header">
        <div class="user-info">
          <img class="avatar" :src="comment.avatar" alt="">
          <div>
            <div class="username">{{ comment.createUserNickname }}</div>
            <div class="comment-time">{{ comment.createTime }}&nbsp;{{ comment.city }}</div>
          </div>
        </div>
      </div>
      <div class="comment-content">
        <a-image v-if="comment.imageList.length > 0" class="comment-image"
                 v-for="(item, index) in comment.imageList" :key="index" :src="item" :width="280"></a-image>
        <div class="comment-text">{{ comment.content }}</div>
      </div>
      <div class="comment-actions">
        <div class="action-btn" @click="onReply(comment)">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 12h18"></path>
            <path d="M3 6v12l8-6z"></path>
          </svg>
          回复
        </div>
        <div class="action-btn" @click="handleLikeComment(comment)">
          <span v-if="comment.likeCount > 0" class="like-count">{{ comment.likeCount }}</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
               :fill="comment.isLike ? 'red' : 'none'" :color="comment.isLike ? 'red' : ''"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path
                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
            </path>
          </svg>
          点赞
        </div>
        <div class="action-btn" @click="handleDislikeComment(comment)">
          <span v-if="comment.dislikeCount > 0" class="like-count">{{ comment.dislikeCount }}</span>
          <svg v-if="!comment.isDislike" t="1752454941767" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="7069" width="260" height="260"
               :fill="comment.isDislike ? '#666' : 'none'" :color="comment.isDislike ? '#666' : ''">
            <path
                d="M208.939 120.875C300.5 79.019 412.288 90.88 512 176.085c99.712-85.205 211.499-97.066 303.061-55.21 98.56 45.013 166.272 149.29 166.272 268.97 0 117.078-48.896 206.251-112.213 277.547-50.432 56.747-112 104.192-165.547 145.408l-0.341 0.299c-12.203 9.386-23.979 18.432-35.2 27.306-21.76 17.11-45.781 35.968-70.315 50.304-24.49 14.294-53.546 26.624-85.717 26.624s-61.227-12.288-85.76-26.624c-24.49-14.336-48.512-33.194-70.272-50.346-11.221-8.832-22.997-17.92-35.2-27.307l-0.341-0.256c-53.59-41.216-115.115-88.619-165.547-145.408C91.563 596.053 42.667 506.88 42.667 389.845c0-119.68 67.754-223.957 166.272-268.97zM502.485 349.14l119.638 85.462a42.667 42.667 0 0 1 7.594 62.506L527.445 616.448l57.387 57.387a42.667 42.667 0 0 1 11.221 40.533l-22.613 90.624c12.928-9.045 26.667-19.712 41.813-31.616 12.416-9.813 25.088-19.627 37.76-29.397h0.043c53.675-41.387 107.733-83.072 152.277-133.248C859.093 550.144 896 480.299 896 389.845c0-87.765-49.579-160.853-116.395-191.36-63.061-28.842-148.778-22.784-232.448 61.27l-44.672 89.386z m-258.09-150.656C177.579 229.035 128 302.08 128 389.845c0 90.454 36.864 160.299 90.667 220.886 44.544 50.176 98.645 91.904 152.32 133.248 12.672 9.813 25.344 19.541 37.802 29.397 22.528 17.75 41.984 32.81 60.544 43.648a177.09 177.09 0 0 0 11.52 6.23l26.582-106.155-68.267-68.267a42.667 42.667 0 0 1-2.219-57.941l97.664-113.92-111.402-79.574a42.667 42.667 0 0 1-13.355-53.802l49.92-99.84c-78.08-68.694-156.501-72.192-215.381-45.27z"
                p-id="7070"></path>
          </svg>
          <svg v-else t="1752459870406" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="8904" width="200" height="200">
            <path
                d="M462.542 178.131l-163.243 163.2c-10.18 10.174-16.24 22.392-18.178 36.654-1.938 14.261 0.641 27.653 7.738 40.175 7.097 12.521 17.262 21.614 30.493 27.278l266.41 114.133-174.591 149.675c-10.902 9.346-17.869 21.038-20.9 35.074-3.033 14.036-1.513 27.56 4.559 40.574l70.997 152.064c-160.64-71.979-272.043-170.752-363.221-285.483C-79.154 422.654-1.63 136.02 196.046 94.035c105.386-22.4 194.26 5.632 266.496 84.054v0.042z m176.298-55.637c55.467-29.525 118.87-37.248 189.739-22.187 197.632 41.984 274.517 324.864 92.032 551.21-92.33 114.433-199.936 213.846-360.405 285.91l-81.195-173.91L667.34 602.11c11.394-9.758 18.48-22.008 21.26-36.75 2.779-14.74 0.64-28.73-6.417-41.967-7.058-13.237-17.48-22.81-31.27-28.718l-268.97-115.242 256.896-256.94z"
                p-id="8905"></path>
          </svg>
          点踩
        </div>
      </div>

      <!-- 回复表单 -->
      <div v-if="curReplyCommentId === comment.id" class="reply-form active sub-reply-form">
                <textarea v-model="replyContent" class="reply-input"
                          :placeholder="`回复 @${comment.createUserNickname}...`"></textarea>
        <div style="display: flex;align-items: flex-start;justify-content: space-between;">
          <div class="left-tools">
            <V3Emoji style="width: 20px;" class="emoji-btn" :size="emojiSize" @click-emoji="selectEmojeReply" :recent="true"
                     :options-name="emojiOptionsName">
            </V3Emoji>
            <!-- 图片上传区域 -->
            <a-upload class="image-upload-area" v-model:file-list="fileList" :customRequest="uploadImages"
                      :style="{ marginTop: route.path === '/article' ? '4px' : '0' }"
                      :show-upload-list="{ showDownloadIcon: true, showRemoveIcon: true }" list-type="picture"
                      @remove="removeImage">
              <svg t="1752628468607" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   style="font-size: 26px;" xmlns="http://www.w3.org/2000/svg" p-id="5684" width="200"
                   height="200">
                <path
                    d="M794.88 868.0448H232.8576c-72.448 0-131.1744-58.7264-131.1744-131.1744V277.8112c0-72.448 58.7264-131.1744 131.1744-131.1744h562.0224c72.448 0 131.1744 58.7264 131.1744 131.1744v459.1104c0 72.3968-58.7264 131.1232-131.1744 131.1232z"
                    fill="#98E593" p-id="5685"></path>
                <path
                    d="M340.3264 151.5008s-116.8896 23.3472-116.8896 122.88v192.256L108.1344 572.928V298.496c0-62.6176 9.728-170.3424 232.192-146.9952z"
                    fill="#ADEFA8" p-id="5686"></path>
                <path
                    d="M689.7152 151.7568s115.2 24.9344 115.2 131.072v205.056l113.6128 113.3568V308.5824c0-66.7136-9.6256-181.76-228.8128-156.8256z"
                    fill="#86DB7F" p-id="5687"></path>
                <path
                    d="M295.3216 152.2688S208.0768 189.184 208.0768 244.224s-2.56 229.9392-2.56 229.9392L282.624 393.5232V240.4864c0-33.9456 7.6288-64.1024 56.7808-84.4288 3.3792-12.0832-44.0832-3.7888-44.0832-3.7888z"
                    fill="#CAF2C7" p-id="5688"></path>
                <path
                    d="M926.0544 601.3952l-104.3968-83.0464c-31.488-25.088-76.6976-22.8864-105.6256 5.0688L359.424 868.0448h435.456c72.448 0 131.1744-58.7264 131.1744-131.1744v-135.4752z"
                    fill="#FFD16C" p-id="5689"></path>
                <path
                    d="M689.7152 858.5728s115.2-24.9344 115.2-131.072v-205.056l113.6128 63.2832v116.0192c0 66.7648-9.6256 181.76-228.8128 156.8256z"
                    fill="#FFC50B" p-id="5690"></path>
                <path
                    d="M794.88 893.6448H359.424c-10.4448 0-19.8144-6.3488-23.7568-16.0256-3.8912-9.6768-1.536-20.736 5.9392-28.0064l356.608-344.6272c38.0416-36.7616 97.9456-39.68 139.3664-6.7072l104.3968 83.0464c6.0928 4.864 9.6768 12.2368 9.6768 20.0192v135.4752c0 86.528-70.3488 156.8256-156.7744 156.8256z m-372.1216-51.2h372.1216c58.2144 0 105.5744-47.36 105.5744-105.5744v-123.136l-94.72-75.3664c-21.3504-16.9984-52.2752-15.5136-71.936 3.4816l-311.04 300.5952z"
                    fill="#434A54" p-id="5691"></path>
                <path
                    d="M399.9744 402.944c-30.7712-33.2288-82.944-34.3552-115.1488-2.56l-183.0912 180.7872v155.7504c0 72.448 58.7264 131.1744 131.1744 131.1744h562.0224c11.1616 0 22.016-1.3824 32.3584-4.0448L399.9744 402.944z"
                    fill="#94E0DE" p-id="5692"></path>
                <path
                    d="M340.3264 858.7776s-116.8896-23.3472-116.8896-122.88V466.6368l-115.3024 105.728v139.4176c0 62.5664 9.728 170.3424 232.192 146.9952z"
                    fill="#B3F4EF" p-id="5693"></path>
                <path
                    d="M295.3216 852.48s-87.2448-10.8032-87.2448-80.896c0-55.04-2.56-304.9472-2.56-304.9472l77.1072-54.272v351.8976c0 33.9456 7.6288 64.1024 56.7808 84.4288 3.3792 12.0832-44.0832 3.7888-44.0832 3.7888z"
                    fill="#E9FFFF" p-id="5694"></path>
                <path
                    d="M632.7296 353.4848m-74.6496 0a74.6496 74.6496 0 1 0 149.2992 0 74.6496 74.6496 0 1 0-149.2992 0Z"
                    fill="#FFC50B" p-id="5695"></path>
                <path
                    d="M621.9776 335.4112m-25.1904 0a25.1904 25.1904 0 1 0 50.3808 0 25.1904 25.1904 0 1 0-50.3808 0Z"
                    fill="#FFE8C0" p-id="5696"></path>
                <path
                    d="M794.88 121.0368H232.8576c-86.4256 0-156.7744 70.3488-156.7744 156.7744v459.1104c0 86.4256 70.3488 156.7744 156.7744 156.7744h562.2272c2.9696 0 5.888-0.1024 8.8064-0.256 0.9216-0.0512 1.792-0.1536 2.6624-0.2048 2.1504-0.1536 4.3008-0.3584 6.4-0.6144 0.9728-0.1024 1.9456-0.256 2.9696-0.3584 2.0992-0.3072 4.1984-0.6144 6.2464-0.9728 0.9216-0.1536 1.8432-0.3072 2.7648-0.512 2.4064-0.4608 4.7616-1.024 7.168-1.5872l1.3824-0.3072c0.0512 0 0.1024-0.0512 0.1536-0.0512 67.7376-17.3056 117.9648-78.848 117.9648-151.9104V277.8112c0.0512-86.4768-70.2976-156.7744-156.7232-156.7744zM232.8576 842.4448c-58.2144 0-105.5744-47.36-105.5744-105.5744V591.872l175.4624-173.2608c10.5984-10.496 24.7296-16.0256 39.5776-15.7184 14.8992 0.3072 28.672 6.5536 38.8096 17.4592l391.168 422.0928H232.8576z m667.5968-105.5744c0 44.0832-27.1872 81.8688-65.6384 97.6896L418.7136 385.536c-19.6608-21.1968-46.336-33.2288-75.264-33.8432-28.928-0.6656-56.1152 10.1888-76.6976 30.464l-139.52 137.728V277.8112c0-58.2144 47.36-105.5744 105.5744-105.5744h562.0224c58.2144 0 105.5744 47.36 105.5744 105.5744v459.0592z"
                    fill="#434A54" p-id="5697"></path>
                <path
                    d="M632.7296 253.2352c-55.2448 0-100.2496 44.9536-100.2496 100.2496 0 55.2448 44.9536 100.2496 100.2496 100.2496s100.2496-44.9536 100.2496-100.2496c-0.0512-55.2448-45.0048-100.2496-100.2496-100.2496z m0 149.2992c-27.0336 0-49.0496-22.016-49.0496-49.0496s22.016-49.0496 49.0496-49.0496 49.0496 22.016 49.0496 49.0496c-0.0512 27.0336-22.016 49.0496-49.0496 49.0496z"
                    fill="#434A54" p-id="5698"></path>
              </svg>
              <template #removeIcon>
                <DeleteOutlined></DeleteOutlined>
              </template>
            </a-upload>
          </div>
          <div class="reply-actions">
            <button type="button" class="cancel-btn" @click="cancelReply">取消</button>
            <button type="button" class="reply-btn" @click="submitReply">回复</button>
          </div>
        </div>
      </div>

      <!-- 回复列表 -->
      <div class="replies-list">
        <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
          <div class="user-info" style="margin-bottom: 10px;">
            <img class="avatar" :src="reply.avatar" alt=""></img>
            <div>
              <div class="username">{{ reply.createUserNickname }}</div>
              <div class="comment-time">{{ reply.createTime }}&nbsp;{{ comment.city }}</div>
            </div>
          </div>
          <div class="reply-content">
                        <span v-if="reply.toCommentId != comment.id" class="reply-to">
                            回复：{{ reply.toCommentUserNickname }}
                        </span>&nbsp;
            <div style="display: flex; flex-direction: column;">
              <a-image class="comment-image" v-for="(item, index) in reply.imageList" :key="index"
                       :src="item" :width="200"></a-image>
              <span class="comment-text">{{ reply.content }}</span>
            </div>
          </div>
          <div class="comment-actions">
            <div class="action-btn" @click="showNestedReplyForm(reply)">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                   fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                   stroke-linejoin="round">
                <path d="M3 12h18"></path>
                <path d="M3 6v12l8-6z"></path>
              </svg>
              回复
            </div>
            <div class="action-btn" @click="handleLikeComment(reply)">
              <span v-if="reply.likeCount > 0" class="like-count">{{ reply.likeCount }}</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                   :fill="reply.isLike ? 'red' : 'none'" :color="reply.isLike ? 'red' : ''"
                   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path
                    d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                </path>
              </svg>
              点赞
            </div>
            <div class="action-btn" @click="handleDislikeComment(reply)">
              <span v-if="reply.dislikeCount > 0" class="like-count">{{ reply.dislikeCount }}</span>
              <svg v-if="!reply.isDislike" t="1752454941767" class="icon" viewBox="0 0 1024 1024"
                   version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7069" width="260" height="260"
                   :fill="reply.isDislike ? '#666' : 'none'" :color="reply.isDislike ? '#666' : ''">
                <path
                    d="M208.939 120.875C300.5 79.019 412.288 90.88 512 176.085c99.712-85.205 211.499-97.066 303.061-55.21 98.56 45.013 166.272 149.29 166.272 268.97 0 117.078-48.896 206.251-112.213 277.547-50.432 56.747-112 104.192-165.547 145.408l-0.341 0.299c-12.203 9.386-23.979 18.432-35.2 27.306-21.76 17.11-45.781 35.968-70.315 50.304-24.49 14.294-53.546 26.624-85.717 26.624s-61.227-12.288-85.76-26.624c-24.49-14.336-48.512-33.194-70.272-50.346-11.221-8.832-22.997-17.92-35.2-27.307l-0.341-0.256c-53.59-41.216-115.115-88.619-165.547-145.408C91.563 596.053 42.667 506.88 42.667 389.845c0-119.68 67.754-223.957 166.272-268.97zM502.485 349.14l119.638 85.462a42.667 42.667 0 0 1 7.594 62.506L527.445 616.448l57.387 57.387a42.667 42.667 0 0 1 11.221 40.533l-22.613 90.624c12.928-9.045 26.667-19.712 41.813-31.616 12.416-9.813 25.088-19.627 37.76-29.397h0.043c53.675-41.387 107.733-83.072 152.277-133.248C859.093 550.144 896 480.299 896 389.845c0-87.765-49.579-160.853-116.395-191.36-63.061-28.842-148.778-22.784-232.448 61.27l-44.672 89.386z m-258.09-150.656C177.579 229.035 128 302.08 128 389.845c0 90.454 36.864 160.299 90.667 220.886 44.544 50.176 98.645 91.904 152.32 133.248 12.672 9.813 25.344 19.541 37.802 29.397 22.528 17.75 41.984 32.81 60.544 43.648a177.09 177.09 0 0 0 11.52 6.23l26.582-106.155-68.267-68.267a42.667 42.667 0 0 1-2.219-57.941l97.664-113.92-111.402-79.574a42.667 42.667 0 0 1-13.355-53.802l49.92-99.84c-78.08-68.694-156.501-72.192-215.381-45.27z"
                    p-id="7070"></path>
              </svg>
              <svg v-else t="1752459870406" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="8904" width="200" height="200">
                <path
                    d="M462.542 178.131l-163.243 163.2c-10.18 10.174-16.24 22.392-18.178 36.654-1.938 14.261 0.641 27.653 7.738 40.175 7.097 12.521 17.262 21.614 30.493 27.278l266.41 114.133-174.591 149.675c-10.902 9.346-17.869 21.038-20.9 35.074-3.033 14.036-1.513 27.56 4.559 40.574l70.997 152.064c-160.64-71.979-272.043-170.752-363.221-285.483C-79.154 422.654-1.63 136.02 196.046 94.035c105.386-22.4 194.26 5.632 266.496 84.054v0.042z m176.298-55.637c55.467-29.525 118.87-37.248 189.739-22.187 197.632 41.984 274.517 324.864 92.032 551.21-92.33 114.433-199.936 213.846-360.405 285.91l-81.195-173.91L667.34 602.11c11.394-9.758 18.48-22.008 21.26-36.75 2.779-14.74 0.64-28.73-6.417-41.967-7.058-13.237-17.48-22.81-31.27-28.718l-268.97-115.242 256.896-256.94z"
                    p-id="8905"></path>
              </svg>
              点踩
            </div>
          </div>
          <!-- 嵌套回复表单 -->
          <div v-if="curReplyCommentId === reply.id" class="reply-form active nested sub-sub-reply-form">
                        <textarea v-model="nestedReplyContent" class="reply-input"
                                  :placeholder="`回复 @${reply.createUserNickname}...`"></textarea>
            <div style="display: flex;align-items: flex-start;justify-content: space-between;">
              <div class="left-tools">
                <V3Emoji class="emoji-btn" :size="emojiSize" @click-emoji="selectEmojeNestedReply"
                         :recent="true" style="width: auto;" :options-name="emojiOptionsName">
                </V3Emoji>
                <!-- 图片上传区域 -->
                <a-upload class="image-upload-area" v-model:file-list="fileList"
                          :style="{ marginTop: route.path === '/article' ? '4px' : '0' }"
                          :customRequest="uploadImages"
                          :show-upload-list="{ showDownloadIcon: true, showRemoveIcon: true }"
                          list-type="picture" @remove="removeImage">
                  <svg t="1752628468607" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       style="font-size: 26px;" xmlns="http://www.w3.org/2000/svg" p-id="5684"
                       width="200" height="200">
                    <path
                        d="M794.88 868.0448H232.8576c-72.448 0-131.1744-58.7264-131.1744-131.1744V277.8112c0-72.448 58.7264-131.1744 131.1744-131.1744h562.0224c72.448 0 131.1744 58.7264 131.1744 131.1744v459.1104c0 72.3968-58.7264 131.1232-131.1744 131.1232z"
                        fill="#98E593" p-id="5685"></path>
                    <path
                        d="M340.3264 151.5008s-116.8896 23.3472-116.8896 122.88v192.256L108.1344 572.928V298.496c0-62.6176 9.728-170.3424 232.192-146.9952z"
                        fill="#ADEFA8" p-id="5686"></path>
                    <path
                        d="M689.7152 151.7568s115.2 24.9344 115.2 131.072v205.056l113.6128 113.3568V308.5824c0-66.7136-9.6256-181.76-228.8128-156.8256z"
                        fill="#86DB7F" p-id="5687"></path>
                    <path
                        d="M295.3216 152.2688S208.0768 189.184 208.0768 244.224s-2.56 229.9392-2.56 229.9392L282.624 393.5232V240.4864c0-33.9456 7.6288-64.1024 56.7808-84.4288 3.3792-12.0832-44.0832-3.7888-44.0832-3.7888z"
                        fill="#CAF2C7" p-id="5688"></path>
                    <path
                        d="M926.0544 601.3952l-104.3968-83.0464c-31.488-25.088-76.6976-22.8864-105.6256 5.0688L359.424 868.0448h435.456c72.448 0 131.1744-58.7264 131.1744-131.1744v-135.4752z"
                        fill="#FFD16C" p-id="5689"></path>
                    <path
                        d="M689.7152 858.5728s115.2-24.9344 115.2-131.072v-205.056l113.6128 63.2832v116.0192c0 66.7648-9.6256 181.76-228.8128 156.8256z"
                        fill="#FFC50B" p-id="5690"></path>
                    <path
                        d="M794.88 893.6448H359.424c-10.4448 0-19.8144-6.3488-23.7568-16.0256-3.8912-9.6768-1.536-20.736 5.9392-28.0064l356.608-344.6272c38.0416-36.7616 97.9456-39.68 139.3664-6.7072l104.3968 83.0464c6.0928 4.864 9.6768 12.2368 9.6768 20.0192v135.4752c0 86.528-70.3488 156.8256-156.7744 156.8256z m-372.1216-51.2h372.1216c58.2144 0 105.5744-47.36 105.5744-105.5744v-123.136l-94.72-75.3664c-21.3504-16.9984-52.2752-15.5136-71.936 3.4816l-311.04 300.5952z"
                        fill="#434A54" p-id="5691"></path>
                    <path
                        d="M399.9744 402.944c-30.7712-33.2288-82.944-34.3552-115.1488-2.56l-183.0912 180.7872v155.7504c0 72.448 58.7264 131.1744 131.1744 131.1744h562.0224c11.1616 0 22.016-1.3824 32.3584-4.0448L399.9744 402.944z"
                        fill="#94E0DE" p-id="5692"></path>
                    <path
                        d="M340.3264 858.7776s-116.8896-23.3472-116.8896-122.88V466.6368l-115.3024 105.728v139.4176c0 62.5664 9.728 170.3424 232.192 146.9952z"
                        fill="#B3F4EF" p-id="5693"></path>
                    <path
                        d="M295.3216 852.48s-87.2448-10.8032-87.2448-80.896c0-55.04-2.56-304.9472-2.56-304.9472l77.1072-54.272v351.8976c0 33.9456 7.6288 64.1024 56.7808 84.4288 3.3792 12.0832-44.0832 3.7888-44.0832 3.7888z"
                        fill="#E9FFFF" p-id="5694"></path>
                    <path
                        d="M632.7296 353.4848m-74.6496 0a74.6496 74.6496 0 1 0 149.2992 0 74.6496 74.6496 0 1 0-149.2992 0Z"
                        fill="#FFC50B" p-id="5695"></path>
                    <path
                        d="M621.9776 335.4112m-25.1904 0a25.1904 25.1904 0 1 0 50.3808 0 25.1904 25.1904 0 1 0-50.3808 0Z"
                        fill="#FFE8C0" p-id="5696"></path>
                    <path
                        d="M794.88 121.0368H232.8576c-86.4256 0-156.7744 70.3488-156.7744 156.7744v459.1104c0 86.4256 70.3488 156.7744 156.7744 156.7744h562.2272c2.9696 0 5.888-0.1024 8.8064-0.256 0.9216-0.0512 1.792-0.1536 2.6624-0.2048 2.1504-0.1536 4.3008-0.3584 6.4-0.6144 0.9728-0.1024 1.9456-0.256 2.9696-0.3584 2.0992-0.3072 4.1984-0.6144 6.2464-0.9728 0.9216-0.1536 1.8432-0.3072 2.7648-0.512 2.4064-0.4608 4.7616-1.024 7.168-1.5872l1.3824-0.3072c0.0512 0 0.1024-0.0512 0.1536-0.0512 67.7376-17.3056 117.9648-78.848 117.9648-151.9104V277.8112c0.0512-86.4768-70.2976-156.7744-156.7232-156.7744zM232.8576 842.4448c-58.2144 0-105.5744-47.36-105.5744-105.5744V591.872l175.4624-173.2608c10.5984-10.496 24.7296-16.0256 39.5776-15.7184 14.8992 0.3072 28.672 6.5536 38.8096 17.4592l391.168 422.0928H232.8576z m667.5968-105.5744c0 44.0832-27.1872 81.8688-65.6384 97.6896L418.7136 385.536c-19.6608-21.1968-46.336-33.2288-75.264-33.8432-28.928-0.6656-56.1152 10.1888-76.6976 30.464l-139.52 137.728V277.8112c0-58.2144 47.36-105.5744 105.5744-105.5744h562.0224c58.2144 0 105.5744 47.36 105.5744 105.5744v459.0592z"
                        fill="#434A54" p-id="5697"></path>
                    <path
                        d="M632.7296 253.2352c-55.2448 0-100.2496 44.9536-100.2496 100.2496 0 55.2448 44.9536 100.2496 100.2496 100.2496s100.2496-44.9536 100.2496-100.2496c-0.0512-55.2448-45.0048-100.2496-100.2496-100.2496z m0 149.2992c-27.0336 0-49.0496-22.016-49.0496-49.0496s22.016-49.0496 49.0496-49.0496 49.0496 22.016 49.0496 49.0496c-0.0512 27.0336-22.016 49.0496-49.0496 49.0496z"
                        fill="#434A54" p-id="5698"></path>
                  </svg>
                  <template #removeIcon>
                    <DeleteOutlined></DeleteOutlined>
                  </template>
                </a-upload>
              </div>
              <div class="reply-actions">
                <button type="button" class="cancel-btn" @click="cancelReply">取消</button>
                <button type="button" class="reply-btn"
                        @click="submitNestedReply(comment.replies, reply)">回复
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="comment-expand" v-if="comment.subCommentCount - 1 > 0 && firstShowSubComment"
           @click="showSubComments(comment)">
        展开{{ comment.subCommentCount - 1 }}条回复
      </div>
      <div class="comment-expand" v-else-if="hasMoreSubComment && !firstShowSubComment"
           @click="showSubComments(comment)">
        展开更多回复
      </div>
    </div>
  </a-spin>
</template>

<script setup>
import {expandMoreSubComment, sendComment} from '@/api/comment.js';
import {dislikeComment} from '@/api/dislikeInfo.js';
import {likeComment} from '@/api/likeInfo.js';
import {message} from "ant-design-vue";
import {useUserStore} from '@/stores/user';
import {onMounted, reactive, ref, watch} from 'vue';
import V3Emoji from "vue3-emoji";
import axios from 'axios';
import {baseURL} from '../utils/request.js';
import {DeleteOutlined} from '@ant-design/icons-vue';
import {useRoute} from "vue-router";

const spinning = ref(false);
const route = useRoute();
const props = defineProps({
  comment: {
    type: Object,
    required: true
  },
  curReplyCommentId: {
    type: Number,
  }
});
const userStore = useUserStore();
// 模块id
const moduleId = ref('1');
// 文件列表
const fileList = ref([]);
const emits = defineEmits(['add-reply', 'on-reply', 'sendCommentSub']);
// 屏幕宽度
const windowWidth = ref(window.innerWidth);
// 当前登录用户信息
const currentUser = reactive({
  nickName: localStorage.getItem('nickName'),
  avatar: localStorage.getItem('avatar'),
});
// 评论图片文件ID列表
const imageFileIds = ref([]);
// 回复相关状态
const isReplyActive = ref(false);
const replyContent = ref('');
// 回复内容
const nestedReplyContent = ref('');
// 是否第一次展示显示xx条回复
const firstShowSubComment = ref(true);
// 是否还有子评论
const hasMoreSubComment = ref(false);
// emoji弹框大小
const emojiSize = ref('big');
// emoji选项卡中文配置
const emojiOptionsName = {
  'Smileys & Emotion': '笑脸&表情',
  'Food & Drink': '食物&饮料',
  'Animals & Nature': '动物&自然',
  'Travel & Places': '旅行&地点',
  'People & Body': '人物&身体',
  'Objects': '物品',
  'Symbols': '符号',
  'Flags': '旗帜',
  'Activities': '活动',
  'grinning face': '微笑',
}
// 显示回复表单
const onReply = (comment) => {
  emits('on-reply', comment);
};

// 提交回复
const submitReply = () => {
  if (replyContent.value.trim() || fileList.value.length > 0) {
    emits('add-reply', {
      rootCommentId: props.comment.id,
      content: replyContent.value,
      toCommentId: props.comment.id,
      toCommentUserId: props.comment.createUserId,
      imageFileIdList: imageFileIds.value,
      fileList: fileList.value,
    });
    cancelReply();
  } else {
    message.error('评论内容不能为空');
  }
};

// 取消回复
const cancelReply = () => {
  replyContent.value = '';
  nestedReplyContent.value = '';
  fileList.value = [];
  emits('on-reply', -1)
};

// 显示嵌套回复表单
const showNestedReplyForm = (reply) => {
  emits('on-reply', reply)
};

// 提交嵌套回复
const submitNestedReply = (replies, reply) => {
  if (!userStore.getToken) {
    message.error('请先登录！');
    return;
  }
  if (!nestedReplyContent.value.trim() && fileList.value.length === 0) {
    message.error('评论内容不能为空');
    return;
  }
  let queryForm = {
    moduleId: moduleId.value,
    rootCommentId: reply.rootCommentId,
    content: nestedReplyContent.value,
    toCommentId: reply.id,
    toCommentUserId: reply.createUserId,
    imageFileIdList: imageFileIds.value,
  }
  sendComment(queryForm).then(res => {
    if (res.code === 200) {
      emits('sendCommentSub', {commentId: res.data.id})
      res.data.createUserNickname = currentUser.nickName;
      res.data.avatar = currentUser.avatar;
      res.data.toCommentUserNickname = reply.createUserNickname;
      res.data.toCommentUserId = reply.createUserId;
      res.data.imageList = fileList.value.map(item => item.url)
      replies.unshift(res.data);
      cancelReply();
    }
  })
};
// 展开更多评论
const showSubComments = (comment) => {
  spinning.value = true;
  let queryForm = {
    moduleId: "1",
    rootCommentId: comment.id,
    curSubCommentList: comment.replies,
  }
  expandMoreSubComment(queryForm).then(res => {
    if (res.code === 200) {
      comment.replies = [...comment.replies, ...res.data.moreSubCommentList];
      firstShowSubComment.value = false;
      hasMoreSubComment.value = comment.replies.length < comment.subCommentCount;
      spinning.value = false;
    }
  }).catch(err => {
    console.log(err);
    spinning.value = false;
  });
};

// 点赞
const handleLikeComment = async (comment) => {
  if (!userStore.getToken) {
    message.error('请先登录！');
    return;
  }
  let originIsDislike = comment.isDislike;
  let originIsLike = comment.isLike;
  if (!originIsDislike && !originIsLike) {
    // 原来既没有点踩，也没有点赞
  } else if (originIsDislike && !originIsLike) {
    // 原来已经点踩，但没有点赞
    await handleDislikeComment(comment);
  } else if (!originIsDislike && originIsLike) {
    // 原来已经点赞，但没有点踩，需要去除点赞信息
  } else {
    return;
  }
  comment.isLike = !originIsLike;

  await likeComment({commentId: comment.id, isLike: !originIsLike}).then(res => {
    if (res.code == 200 && res.data) {
      comment.likeCount = comment.isLike ? comment.likeCount + 1 : comment.likeCount - 1;
    }
  })
};

// 点踩
const handleDislikeComment = async (comment) => {
  if (!userStore.getToken) {
    message.error('请先登录！');
    return;
  }
  let originIsDislike = comment.isDislike;
  let originIsLike = comment.isLike;
  if (!originIsDislike && !originIsLike) {
    // 原来既没有点踩，也没有点赞
  } else if (originIsDislike && !originIsLike) {
    // 原来已经点踩，但没有点赞
  } else if (!originIsDislike && originIsLike) {
    // 原来已经点赞，但没有点踩，需要去除点赞信息
    await handleLikeComment(comment);
  } else {
    return;
  }
  comment.isDislike = !originIsDislike;

  await dislikeComment({commentId: comment.id, isDislike: !originIsDislike}).then(res => {
    if (res.code == 200 && res.data) {
      comment.dislikeCount = comment.isDislike ? comment.dislikeCount + 1 : comment.dislikeCount - 1;
    }
  })
};

const handleScreenResize = () => {
  windowWidth.value = window.innerWidth;
  if (windowWidth.value < 768) {
    // 超小屏幕
    emojiSize.value = 'small';
  } else if (windowWidth.value < 992) {
    // 中等屏幕
    emojiSize.value = 'mid';
  } else if (windowWidth.value < 1200) {
    // 大屏幕
    emojiSize.value = 'big';
  } else {
    // 超大屏幕
    emojiSize.value = 'big';
  }
}

const selectEmojeReply = (emoji) => {
  replyContent.value += emoji;
}

const selectEmojeNestedReply = (emoji) => {
  nestedReplyContent.value += emoji;
}

// 上传图片
const uploadImages = async ({file}) => {
  if (!userStore.getToken) {
    fileList.value = [];
    message.error('请先登录！');
    return;
  }
  // 上传文件
  const formData = new FormData();
  formData.append('file', file);
  formData.append('moduleId', moduleId);

  const res = await axios.post(
      baseURL + 'lzh/file/upload2',
      formData,
      {
        headers: {
          'Content-Type': 'multipart/form-data',
          'token': localStorage.getItem('token'),
        },
      }
  );
  const fileInfo = res.data.data;
  if (res.data.code !== 200 || !fileInfo) {
    message.success("上传失败");
    return
  } else {
    message.success("上传成功");
    imageFileIds.value.push(fileInfo.id);
    file.url = fileInfo.fileAddress;
    file.id = fileInfo.id;
    let newFileList = [];
    for (let i = 0; i < fileList.value.length; i++) {
      let one = fileList.value[i];
      if (!one.originFileObj) {
        newFileList.push(one)
      }
    }
    newFileList.push(file);
    fileList.value = [...newFileList];
  }
};
// 移除图片
const removeImage = (file) => {
  fileList.value = fileList.value.filter(item => item.uid !== file.uid);
  images.value = fileList.value.map(item => item.id);
};

onMounted(() => {
  window.addEventListener('resize', handleScreenResize);
})

</script>

<style scoped>
.comment-item {
  padding: 15px;
  border-radius: 8px;
  background-color: #fafafa;
  position: relative;
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .comment-expand {
    font-size: 14px;
    margin-top: 10px;
    color: #4285f4;
    cursor: pointer;

    &:hover {
      color: #3367d6;
    }
  }
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-weight: bold;
  font-size: 14px;
}

.username {
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.comment-time {
  font-size: 13px;
  color: #999;
}

.comment-content {
  color: #555;
  line-height: 1.5;
  margin-bottom: 10px;
  white-space: pre-wrap;
}

/* a-image图片样式 */
:deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-image) {
  margin: 10px 10px 10px 0;

  &:last-child {
    margin-right: 0;
  }
}


.comment-actions {
  display: flex;
  gap: 15px;
  font-size: 14px;
}

.action-btn {
  color: #666;
  cursor: pointer;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;

  &:hover {
    color: #4285f4;
  }

  .like-count {
    color: #666;
  }
}

.reply-form {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #eee;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 0;
  opacity: 0;
  transition: all 0.3s ease-out;
}

.reply-form.active {
  max-height: 300px;
  opacity: 1;
}

.reply-input {
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  resize: none;
  min-height: 80px;
  font-size: 14px;
  transition: border-color 0.3s;

  &:focus {
    outline: none;
    border-color: #4285f4;
  }
}

.reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.cancel-btn {
  padding: 5px 7px;
  border: 1px solid #e0e0e0;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  transition: all 0.2s;

  &:hover {
    background-color: #f8f8f8;
  }
}

.reply-btn {
  padding: 5px 7px;
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;

  &:hover {
    background-color: #3367d6;
  }
}


.replies-list {
  margin-top: 15px;
  padding-left: 20px;
  border-left: 2px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.reply-item {
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 6px;
  transition: all 0.3s;

  &:hover {
    background-color: #f5f5f5;
  }
}


.reply-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 13px;
}

.reply-content {
  display: flex;
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
  white-space: pre-wrap;
  flex-wrap: wrap;
}

.reply-to {
  color: #999;
}

.nested {
  margin-left: 20px;
  border-left: 1px solid #eee;
  padding-left: 10px;
}

/* 嵌套评论的容器 */
.nested-comments {
  margin-top: 10px;
  padding-left: 20px;
  border-left: 2px solid #f0f0f0;
}

.left-tools {
  display: flex;

  .emoji-btn {
    margin-right: 10px;
  }

  .image-upload-area {
    cursor: pointer;
  }
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-upload-wrapper :deep(.ant-upload-list) {
  display: flex;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-upload-wrapper :deep(.ant-upload-list) .ant-upload-list-item-container {
  margin-right: 10px;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-upload-wrapper :deep(.ant-upload-list) .ant-upload-list-item-container:last-child {
  margin-right: 0;
}

:deep(.ant-upload-list) {
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .sub-reply-form {
    :where(.css-dev-only-do-not-override-1p3hq3p).ant-upload-wrapper{
      width: 1px;
    }
    :deep(.ant-upload-list-item-container){
      max-width: 73vw;
    }
  }
  .sub-sub-reply-form {
    :deep(.ant-upload-list-item-container) {
      max-width: 54vw;
    }

    :where(.css-dev-only-do-not-override-1p3hq3p).ant-upload-wrapper {
      width: 1px;
    }
  }
}
</style>